<template>
  <section v-if="!(item.meta && item.meta.hidden)">
    <app-link
      v-if="hasOneShowingChild(item.children, item)
        && !onlyOneChild.children
        && !item.meta?.visible
        && onlyOneChild.meta"
      :to="resolvePath(onlyOneChild.path)"
      :is-blank="onlyOneChild.meta && onlyOneChild.meta.isBlank"
    >
      <el-menu-item
        :index="resolvePath(onlyOneChild.path)"
        :class="{'no-drop': !isNest}"
      >
        <el-tooltip
          v-if="isCollapse"
          effect="dark"
          :content="onlyOneChild.meta.title"
          placement="right"
          :disabled="isNest"
        >
          <ul class="slot__custom-title-wrap">
            <li class="slot__custom-title-icon">
              <component
                :is="onlyOneChild.meta.icon || (item.meta && item.meta.icon)"
                v-if="onlyOneChild.meta.icon || (item.meta && item.meta.icon)"
                :class="isCollapse ? 'menu-icon' : 'menu-icon mr-6'"
              />
            </li>
            <li class="slot__custom-title-txt">
              {{ onlyOneChild.meta.title }}
            </li>
          </ul>
        </el-tooltip>

        <template
          v-if="!isCollapse"
          #title
        >
          <component
            :is="onlyOneChild.meta.icon || (item.meta && item.meta.icon)"
            v-if="onlyOneChild.meta.icon || (item.meta && item.meta.icon)"
            style="width: 20px; height: 20px;"
            :class="isCollapse ? 'menu-icon' : 'menu-icon mr-6'"
          />
          <span :class="isNest ? 'title__is-nest' : ''">
            {{ onlyOneChild.meta.title }}
          </span>
        </template>
      </el-menu-item>
    </app-link>

    <el-sub-menu
      v-else
      :index="resolvePath(item.path)"
    >
      <template #title>
        <template v-if="!isCollapse && item.meta">
          <component
            :is="item.meta.icon"
            v-if="item.meta.icon"
            :class="isCollapse ? 'menu-icon' : 'menu-icon mr-6'"
          />
          <span :class="isNest ? 'title__is-nest' : ''">{{ item.meta.title || '' }}</span>
        </template>

        <ul
          v-if="isCollapse && item.meta"
          class="slot__custom-title-wrap"
        >
          <li class="slot__custom-title-icon">
            <component
              :is="item.meta.icon"
              v-if="item.meta.icon"
              :class="isCollapse ? 'menu-icon' : 'menu-icon mr-6'"
            />
          </li>
          <li class="slot__custom-title-txt">
            {{ item.meta.title || '' }}
          </li>
        </ul>
      </template>

      <sidebar-item
        v-for="child in item.children"
        :key="child.path"
        :item="child"
        :is-nest="true"
        :base-path="resolvePath(child.path)"
        :is-collapse="isCollapse"
        class="nest-menu"
      />
    </el-sub-menu>
  </section>
</template>
<script lang="ts">
import { defineComponent, reactive, toRefs } from 'vue';

import path from 'path-browserify';

import AppLink from './sidebar-link.vue';

import { isExternal } from '@/utils/validate';

  interface InterfaceState {
    onlyOneChild: TypeObject,
    basePath: string
  }

export default defineComponent({
  name: 'SidebarItem',
  components: { AppLink },
  props: {
    item: {
      type: Object,
      required: true,
    },
    isNest: {
      type: Boolean,
      default: false,
    },
    basePath: {
      type: String,
      default: '',
    },
    isCollapse: {
      type: Boolean,
      default: false,
    },
  },
  setup(props) {
    const state: InterfaceState = reactive({
      onlyOneChild: {},
      basePath: '',
    });
    return {
      ...toRefs(state),
      hasOneShowingChild: (children: any, parent: any): boolean => {
        children = children || [];
        // 配置支持tabsMenu，也就是子菜单在tab标签页中展示
        if (parent?.meta?.isTabsMenu) {
          parent.children = null;
          state.onlyOneChild = parent;
          return true;
        }
        const showingChildren = children.filter((item: any) => {
          if (item.hidden) {
            return false;
          }
          state.onlyOneChild = item;
          return !(item.meta && item.meta.hidden);
        });
        if (showingChildren.length === 1) {
          // When there is only one child router, the child router is displayed by default
          state.onlyOneChild = children[0];

          // 直接展示一级菜单的情况使用该属性
          if (state.onlyOneChild.meta.onlyOneChildren) {
            state.onlyOneChild.children = null;
          }
          return true;
        }
        if (showingChildren.length === 0) {
          // Show parent if there are no child router to display
          state.onlyOneChild = { path: '', ...parent };
          return true;
        }
        return false;
      },
      resolvePath: (routePath: any): string => {
        if (isExternal(routePath)) {
          return routePath;
        }
        if (isExternal(props.basePath)) {
          return props.basePath;
        }
        return path.resolve(props.basePath, routePath);
      },
    };
  },
});
</script>
<style lang="scss" scoped>
  .menu-icon {
    width: 20px;
    height: 20px;

    &.mr-6 {
      margin-right: 6px;
    }
  }

  .slot__custom-title-wrap {
    width: 100%;
    height: 56px;
    overflow: hidden;

    .slot__custom-title-icon {
      height: 28px;
      line-height: 30px;
      text-align: center;
    }

    .slot__custom-title-txt {
      height: 28px;
      line-height: normal;
      text-align: center;
    }
  }

  .title__is-nest {
    padding-left: 10px;
  }
</style>
